import React, { useEffect, useMemo, useState } from 'react'
import { Breadcrumb, Layout, theme } from 'antd'
import MyMenu from './component/MyMenu/MyMenu'
import Logo from '@/component/common/logo/Logo'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { managementMenu } from '@/router'
import honeApi from './api'
import { ArrowRightOutlined } from '@ant-design/icons'
import cookie from 'react-cookies'
import './index.scss'
const { Header, Content, Sider } = Layout

const Home: React.FC = () => {
  const navigate = useNavigate()
  const [collapsed, setCollapsed] = useState<boolean>(false)

  const curPath = useLocation()
  const Breadcrumbs = useMemo(() => {
    const curPathMsg = managementMenu.find((item) => {
      return curPath.pathname.includes(item.path)
    })
    return (
      <Breadcrumb
        items={[
          { title: '数据板', href: '/home' },
          {
            title: `${curPathMsg?.handle.name}`,
            href: `/home/${curPathMsg?.path}`,
          },
        ]}
        style={{ height: '3rem', lineHeight: '3rem' }}></Breadcrumb>
    )
  }, [curPath])
  useEffect(() => {
    const getUserInfo = () => {
      honeApi.getUserInfo().then((data) => {
        sessionStorage.setItem('userInfo', JSON.stringify(data))
      })
    }
    getUserInfo()
  }, [])
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        style={{
          boxShadow: '1px 0 0 #DFE5F1',
        }}
        onCollapse={(value) => setCollapsed(value)}>
        <Logo width={40} margin={'20px 0'} showtext={collapsed ? 0 : 1}></Logo>
        <MyMenu></MyMenu>
      </Sider>
      <Layout>
        <Header
          style={{ padding: 0, height: '8vh', minHeight: '3rem', boxShadow: '0 0 0 1px #DFE5F1', display: 'flex', }}
        >
          <div className='logout' onClick={() => {
            sessionStorage.clear()
            cookie.remove('token')
            navigate('/login', { replace: true })
          }}>
            <span>退出登录<ArrowRightOutlined /></span>
          </div>
        </Header>
        <Content
          className='content-box'>
          {Breadcrumbs}
          <div className='content'>
            <Outlet></Outlet>
          </div>
        </Content>
      </Layout>
    </Layout>
  )
}

export default Home
